import { TinyColor } from '@ctrl/tinycolor';
import { createStyles } from 'antd-style';
import { CSSProperties } from 'react';

interface ExpandStyle {
  isOnlyOne: boolean;
  wrapperStyle: CSSProperties;
  cardStyle: Pick<CSSProperties, 'width' | 'height'>;
}

export const useStyle = createStyles(
  ({ token, prefixCls }, args: Partial<ExpandStyle>) => {
    const cardSize = token.controlHeightLG * 2.25;
    args.cardStyle = Object.assign(
      { width: cardSize, height: cardSize },
      args.cardStyle,
    );

    return {
      container: {
        [`&.${prefixCls}-upload-wrapper`]: {
          display: 'block',
          verticalAlign: 'bottom',
          ...(args.wrapperStyle as any),
          [`&.${prefixCls}-upload-picture-card-wrapper`]: {
            // overflow: 'hidden',
            ['&']: args.isOnlyOne ? args.cardStyle : undefined,
            [`.${prefixCls}-upload-list.${prefixCls}-upload-list-picture-card`]:
              {
                ['&::before']: {
                  content: 'none',
                },
                // 一样卡片
                [`.${prefixCls}-upload-select,.${prefixCls}-upload-list-item-container`]:
                  {
                    ...args.cardStyle,
                    margin: 0,
                  },

                // 操作按钮条，可以改
                ['.ant-upload-list-item-actionslist']: {
                  position: 'absolute',
                  insetInlineStart: 0,
                  zIndex: 10,
                  width: '100%',
                  whiteSpace: 'nowrap',
                  textAlign: 'center',
                  opacity: 0,
                  transition: `all ${token.motionDurationSlow}`,
                  bottom: 0,
                  background: token.colorBgMask,

                  // 操作按钮
                  [`.action-tabs`]: {
                    zIndex: 10,
                    margin: `0 ${token.marginXXS}px`,
                    fontSize: token.fontSizeSM,
                    cursor: 'pointer',
                    transition: `all ${token.motionDurationSlow}`,
                    color: new TinyColor(token.colorTextLightSolid)
                      .setAlpha(0.65)
                      .toRgbString(),
                    ['&:hover']: {
                      color: token.colorTextLightSolid,
                    },

                    ['.action-icon']: {
                      width: token.fontSizeSM,
                      marginRight: token.marginXXS,
                    },

                    svg: {
                      verticalAlign: 'baseline',
                    },
                  },
                  // 按钮分割线
                  ['.ant-divider']: {
                    backgroundColor: new TinyColor(token.colorTextLightSolid)
                      .setAlpha(0.65)
                      .toRgbString(),
                  },
                },

                [`.${prefixCls}-upload-list-item-container`]: {
                  flexShrink: 0,
                  ['&:hover']: {
                    ['.ant-upload-list-item-actionslist']: {
                      opacity: 1,
                    },
                  },

                  [`.${prefixCls}-upload-list-item`]: {
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    padding: 0,

                    ['&::before']: {
                      width: '100%',
                      height: '100%',
                      left: 0,
                      top: 0,
                      content: 'none',
                    },
                    [`.${prefixCls}-image`]: {
                      width: '100%',
                      height: '100%',
                      [`.${prefixCls}-image-img`]: {
                        width: '100%',
                        height: '100%',
                        objectFit: 'contain',
                      },
                    },
                  },
                },
                display: 'flex',
                gap: 8,
                flexWrap: 'wrap',
              },
          },

          [`.${prefixCls}-upload-list-text`]: {
            [`.${prefixCls}-upload-list-item`]: {
              height: token.controlHeight,
              columnGap: 8,
            },
          },
        },
      },
    };
  },
);
